<template>
<div class="container">
  <div class="top">
    <div class="top-banner">
      <!-- <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../assets/images/c.jpg" alt=""> 
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/consultant@2x.png" alt=""> 
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/top-right-pic.png" alt="">  
          </div>
        </div>
        <div class="pagination"></div>
      </div> -->
      <swiper :options="swiperOption" ref="mySwiper">
       <!-- slides -->
        <swiper-slide v-for="item in advertisementURLList" :key="item.productId">
          <img :src="item.imgUrl" alt="">
        </swiper-slide>
       <!-- <swiper-slide>I'm Slide 2</swiper-slide>
       <swiper-slide>I'm Slide 3</swiper-slide> -->
       <!-- Optional controls -->
       <div class="swiper-pagination"  slot="pagination"></div>
       <!-- <div class="swiper-button-prev" slot="button-prev"></div>
       <div class="swiper-button-next" slot="button-next"></div>
       <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
      </swiper>

    </div>
    <div class="top-nav flex">
      <!-- <router-link :to="nav.navUrl" class="nav flex-1" v-for="(nav,index) in navs" :key="index">
        <img :src="nav.navIcon" alt="">
        <span>{{nav.navName}}</span>
      </router-link> -->
      <router-link :to="{path:'/NewsList',query:{productType:0}}" class="nav flex-1">
        <img src="../assets/images/consultant@2x.png" alt="">
        <span>投顾服务</span>
      </router-link>
      <router-link :to="{path:'/NewsList',query:{productType:1}}" class="nav flex-1">
        <img src="../assets/images/smart@2x.png" alt="">
        <span>独家资讯</span>
      </router-link>
      <router-link :to="{path:'/NewsList',query:{productType:2}}" class="nav flex-1">
        <img src="../assets/images/information@2x.png" alt="">
        <span>智能工具</span>
      </router-link>
      <router-link to="/MyOrder" href="javascript:;" class="nav flex-1">
        <img src="../assets/images/order@2x.png" alt="">
        <span>我的订单</span>
      </router-link>
    </div>
  </div>

  <!-- 营业部精选 -->
  <!-- <div class="product-wrap" v-for="(iData,key) in indexData">
    <div class="title"><span>{{iData.name}}</span></div>
    <div class="lists-wrap">
      <div class="list flex" v-for="nItem in iData.newLists" v-on:click="linkto(nItem.link)">
        <div class="list-l">
          <img :src="nItem.pic" alt="">
        </div>
        <div class="list-r flex-1">
          <div class="t">{{nItem.title}}</div>
          <div class="content">{{nItem.content}}</div>
        </div>
      </div>
    </div>
    <a v-bind:href="iData.moreLink" class="more">
      <span>更多营业部精选</span>
    </a>
  </div> -->

  <!-- 营业部精选 -->
  <div class="product-wrap">
    <div class="title"><span>投顾服务</span></div>
    <div class="lists-wrap">
      
      <router-link class="list flex" 
        v-for="item in adviserProductList" 
        :to="{path:'/ProductDetail',query:{productId:item.productId}}"
        :key="item.productId">
        <div class="list-l">
          <img :src="item.logoUrl" :onerror="defaultImg" alt="">
        </div>
        <div class="list-r flex-1">
          <div class="t" v-text="item.productName"></div>
          <div class="content" v-text="item.summary"></div>
        </div>
      </router-link>

    </div>
    <router-link :to="{path:'/NewsList',query:{productType:0}}" class="more">
      <span>更多投顾服务</span>
    </router-link>
  </div>

  <div class="product-wrap">
    <div class="title"><span>独家咨询</span></div>
    <div class="lists-wrap">
      <router-link class="list flex" 
        v-for="item in infoProductList"
        :to="{path:'/ProductDetail',query:{productId:item.productId}}"
        :key="item.productId"
        >
        <div class="list-l">
          <img :src="item.logoUrl" :onerror="defaultImg" alt="">
        </div>
        <div class="list-r flex-1">
          <div class="t" v-text="item.productName"></div>
          <div class="content" v-text="item.summary"></div>
        </div>
      </router-link>

    </div>
    <router-link :to="{path:'/NewsList',query:{productType:1}}" class="more">
      <span>更多独家咨询</span>
    </router-link>
  </div>

  <div class="product-wrap" v-if="branchProductList.length !=0">
    <div class="title"><span>营业部精选</span></div>
    <div class="lists-wrap">
      
      <router-link class="list flex" 
        v-for="item in branchProductList"
        :to="{path:'/ProductDetail',query:{productId:item.productId}}"
        :key="item.productId"
        >
        <div class="list-l">
          <img :src="item.logoUrl" :onerror="defaultImg" alt="" >
        </div>
        <div class="list-r flex-1">
          <div class="t" v-text="item.productName"></div>
          <div class="content" v-text="item.summary"></div>
        </div>
      </router-link>

    </div>
    <router-link :to="{path:'/NewsList',query:{productType:3}}" class="more">
      <span>更多营业部精选</span>
    </router-link>
  </div>

  <div class="product-wrap">
    <div class="title"><span>智能工具</span></div>
    <div class="lists-wrap">
      
      <router-link class="list flex" 
        v-for="item in toolsProductList"
        :to="{path:'/ProductDetail',query:{productId:item.productId}}"
        :key="item.productId">
        <div class="list-l">
          <img :src="item.logoUrl" :onerror="defaultImg" alt="">
        </div>
        <div class="list-r flex-1">
          <div class="t" v-text="item.productName"></div>
          <div class="content" v-text="item.summary"></div>
        </div>

      </router-link>

    </div>
    <router-link :to="{path:'/NewsList',query:{productType:2}}" class="more">
      <span>更多智能工具</span>
    </router-link>
  </div>

  <!-- <router-view/> -->
  <Info v-if="postError.isShow" 
    @infoClose="closeDialog" 
    :txt="postError.txt"></Info>

</div>

</template>

<script>
import '../../node_modules/_swiper@4.1.6@swiper/dist/css/swiper.css';
import {swiper,swiperSlide} from 'vue-awesome-swiper';
import Info from '@/components/Info';
import Api from '@/service';
import Tip from '@/tools';
export default {
  name: 'Home',
  data () {
    return {
      navs: [],
      adviserProductList: [],
      branchProductList: [],
      infoProductList: [],
      toolsProductList: [],
      advertisementURLList: [],
      postError: {
        txt: '',
        isShow: false
      },
      swiperOption: {
       notNextTick: true,
       pagination: '.swiper-pagination',
       autoplay: true,
       loop: true,
       speed: 600,
      },
      defaultImg: Tip.tips.res.defaultImg
    }
  },
  components: {
   swiper,
   swiperSlide,
   Info
  },
  methods: {
    postData(){
      let _self = this;

      Api.sm.initHome()
      .then(function(response){
        console.log("HOme page:");
        console.log(response);
        // console.log(response.data);
        if(response.data.status == "success" && response.data.code==200){
          _self.adviserProductList = response.data.info.adviserProductList;
          _self.branchProductList = response.data.info.branchProductList;
          _self.infoProductList = response.data.info.infoProductList;
          _self.toolsProductList = response.data.info.toolsProductList;
          _self.advertisementURLList = response.data.info.advertisementURLList;

        }else if(response.data.status == "success" && response.data.code!=200){
          // 弹窗信息 
          _self.postError.txt = response.data.message;
          _self.postError.isShow = true;
        }
        // else if(response.data.status == "failure"){
        //   // 统一刷新
        //   setInterval(()=>{
        //     _self.$router.push({path:'/Refresh'});
        //   },500);
        // }

      });
    },
    closeDialog(){
      this.postError.isShow = false;
    }
  },
  created: function(){
    this.postData();
  },
  computed: {
    swiper(){
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted: function(){
    // this.swiper.slideTo(3, 3000, false)
  }
}
</script>

<style lang="scss" scoped type="text/css">

@import  "../assets/scss/reset";
.container{
  width: 100%;
  background: #F5F8FA;
  // overflow: hidden;
  box-sizing: border-box;
  .top{
    width: 100%;
    height: auto;
    .top-banner{
      width: 100%;
      height: calculateRem(140px);
    }
    .top-nav{
      width: 100%;
      height: calculateRem(92px);
      background-color: white;
      .nav{
        height: calculateRem(92px);
        max-width: 25%;
        text-align: center;
        &:active{
          background-color: #fafafa;
        }
        >img{
          height: calculateRem(42px);
          width: calculateRem(42px);
          margin-top: calculateRem(12px);
        }
        >span{
          display: block;
          width: 100%;
          height: calculateRem(20px);
          line-height: calculateRem(20px);
          color: #333;
          font-size: calculateRem(14px);
          margin-top: calculateRem(5px);
        }
      }
    }
  }
  .product-wrap{
    width: 100%;
    height: auto;
    background: white;
    margin-top: calculateRem(16px);
    /*margin-bottom: calculateRem(16px);*/
    .title{
      height: calculateRem(32px);
      line-height: calculateRem(47px);
      box-sizing: border-box;
      padding: 0 calculateRem(16px);
      >span{
        font-size: 16px;
        color: #333;
        font-weight: bold;
        &:before{
          content: '';
          display: inline-block;
          width: calculateRem(4px);
          height: calculateRem(16px);
          background: #F21612;
          margin-right: calculateRem(8px);
          vertical-align: -2px;
        }
      }
    }
    .lists-wrap{
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding: 0 calculateRem(16px);
      .list{
        width: 100%;
        height: auto;
        box-sizing: border-box;
        border-bottom: 1px solid #EAEAEA;
        padding: calculateRem(14px) 0;
        &:active{
          background-color: #fbfbfb;
        }
        .list-l{
          width: calculateRem(80px);
          height: calculateRem(80px);
          margin-right: calculateRem(15px);
          overflow: hidden;
          >img{
            width: 100%;
            height: 100%;
          }

        }
        .list-r{
          max-width: 67%;
          .t{
            width: 100%;
            height: calculateRem(22px);
            line-height: calculateRem(22px);
            font-size: calculateRem(16px);
            color: #333;
            font-weight: bold;
            @include ell;

          }
          .content{
            width: 100%;
            height: calculateRem(60px);
            line-height: calculateRem(20px);
            color: #4b4b4b;
            font-size: calculateRem(14px);
            @include break;
            @include mulell(3);
            overflow: hidden;

          }

        }

      }
      
    }
    .more{
      display: block;
      width: 100%;
      height: calculateRem(48px);
      line-height: calculateRem(48px);
      text-align: center;
      &:active{
        background-color: #fafafa;
      }
      >span{
        color: #FF703A;
        font-size: calculateRem(15px);
        &:after{
          content: '';
          display: inline-block;
          width: calculateRem(14px);
          height: calculateRem(14px);
          background: url(../assets/images/drop-down-normal@2x.png) no-repeat;
          background-size: 100%;
          vertical-align: middle;
          margin-left: calculateRem(4px);

        }

      }
    }


  }



}

@import url("../assets/scss/swiper.min.css");

/*插件开始*/
.swiper-container {
  width: 100%;
  height: 11.66667rem; }

.swiper-slide {
  width: 100%;
  height: 11.66667rem; }

.swiper-slide img {
  width: 100%;
  height: 11.66667rem; }

.pagination {
  position: absolute;
  z-index: 20;
  right: 20px;
  bottom: 0.83333rem; }

.swiper-pagination-switch {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #b2b2b2;
  margin: 0 0px 5px;
  opacity: 0.8;
  cursor: pointer;
  float: left;
  margin-right: 4px; }

.swiper-active-switch {
  background: #F21612; }

/*插件结束*/
</style>
